<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="dialogTitle"
    width="40%"
    @close="handleClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="70px">
      <el-form-item label="管理员名" prop="adminName">
        <el-input v-model="form.adminName" />
      </el-form-item>

      <el-form-item label="昵称" prop="adminNickName">
        <el-input v-model="form.adminNickName" />
      </el-form-item>

      <el-form-item label="邮箱" prop="adminEmail">
        <el-input v-model="form.adminEmail" />
      </el-form-item>

      <el-form-item label="电话" prop="adminPhone">
        <el-input v-model="form.adminPhone" />
      </el-form-item>
      <el-form-item label="状态" prop="adminStatus">
        <el-select v-model="form.adminStatus" placeholder="请选择状态">
          <el-option label="启用" value="1" />
          <el-option label="禁用" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="管理员类型" prop="adminType">
        <el-select v-model="form.adminType" placeholder="请选择管理员类型">
          <el-option label="管理员" value="1" />
          <el-option label="普通用户" value="2" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handlerConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineEmits, ref, defineProps, watch } from "vue";
import { createAdmin, updateAdmin } from "@/api/admin";
import { ElMessage } from "element-plus";

const formRef = ref("");
const form = ref({
  adminName: "",
  adminNickName: "",
  adminEmail: "",
  adminPhone: "",
  adminStatus: "",
  adminType: "",
});

const props = defineProps({
  dialogTitle: {
    type: String,
    default: "",
    required: true,
  },
  dialogTableValue: {
    type: Object,
    default: () => ({}),
  },
});

watch(
  () => props.dialogTableValue,
  () => {
    form.value = props.dialogTableValue;
  },
  { deep: true, immediate: true }
);

const rules = ref({
  adminName: [
    {
      required: true,
      message: "请输入姓名",
      trigger: "change",
    },
  ],
  adminEmail: [
    {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
  adminPhone: [
    {
      required: true,
      message: "请输入电话",
      trigger: "change",
    },
  ],
});

const emits = defineEmits(["update:modelValue", "initGetList"]);

const handleClose = () => {
  emits("update:modelValue", false);
};

const handlerConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      props.dialogTitle === "添加管理员"
        ? await createAdmin(form.value)
        : await updateAdmin(form.value);
      ElMessage({
        message: "操作成功",
        type: "success",
      });
      emits("initGetList");
      handleClose();
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>

<style></style>
